<template>
  <!--Vue自定义模板组件要求之一：唯一根元素-->
  <div class="hello">
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <!--
          prop="id" - 当前列显示的哪一个属性的值
      -->
      <el-table-column
        prop="id"
        label="编号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="200">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <!--
   不能写死：故进行了绑定
   currentPage
     pageSize
     totals
   -->
    <el-pagination
      background
      @current-change="getCurrentPage"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="totals">
    </el-pagination>
  </div>
</template>

<script>
export default {//实际上是export default new Vue实例，这里没写出来 - 导出这个Vue实例-组件到App.vue路由出口处显示
  data () {
    return {
      //分页数据
      pageSize:5,//给个默认值
      currentPage:1,//给个默认值
      totals:0,//给个默认值
      //返回给绑定处的数据 - 按照属性名一一对应
      tableData:[]//最开始是没有数据的，页面加载完成再由axios发送异步请求获取真实的数据
    }
  },
  methods:{
    handleEdit(row){},
    handleDelete(row){},
    getCurrentPage(page){
      //给当前页赋值
      this.currentPage=page;//page:默认为1，但是当页面改变时会改变当前页数，所以不写死
      //页数改变后，是展示新的数据，所以又会调用展示列表的方法【fastMock模拟假数据】
        //查询新的数据
      this.getStudent();
    },
    getStudent(){
      //当前Vue实例的tableData
      //{"currentPage":this.currentPage,"pageSize":this.pageSize}虽然传递了参数，但是没有用，因为个数这些都在在线接口中写了的
      this.$http.post("/stu/list",
        {"currentPage":this.currentPage,"pageSize":this.pageSize})
        .then(res=>{//成功后的回调函数
        console.log(res);
        //res.data固定语法 - 是axios获取数据的固定语法，最后一个data是响应的数据
          //数组的值等于响应数据中的内容【在table中绑定的tableData】
        this.tableData = res.data.data;//显示当前页的数据
        this.totals = res.data.totals;//数据总条数-用于计算分页栏
      }).catch(res=>{//失败 //res是用于接收数据的参数，名字可以随便取

      })
    }
  },
  mounted() {//钩子方法【一共有8个】 - 页面加载完成后自动调用
    this.getStudent();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
